<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
    <style>
        .el-divider__text {
            background: #eee;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="/page/end/mainui.html">管理页面</a></span>
                </transition>
            </div>
            <!-- 菜单 -->
            <el-menu :default-openeds="['1']" style="border: none;" background-color="black" text-color="#fff" active-text-color="#ffd04b"
                     default-active="home"
                     class="el-menu-vertical-demo" :collapse="isCollapse">
                <a href="/page/end/mainui.html">
                    <el-menu-item index="home">
                        <i class="el-icon-data-line"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                </a>
                <el-submenu index="1" v-if="user.permission && user.permission.length > 0">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">信息管理</span>
                    </template>
                    <a :href=`${item.path}` v-for="item in user.permission" :key="item.id">

                        <el-menu-item :index="item.flag">
                            <i class="el-icon-s-data"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </a>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i style="font-size: 22px; cursor: pointer"
                           :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleCollapse"></i>
                    </el-col>
                    <el-col :span="2" :offset="21" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.jobnum}}</span>
                        <el-dropdown>
                            <img :src=`/files/${user.avatar}`
                                 style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown">
                                <a href="/page/end/person.html"
                                   style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a>
                                <a @click="logout" href="#"
                                   style="display:block; width: 100px;  text-align: center; color: black">退出</a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 主体区域 -->
            <el-main>

            </el-main>
        </el-container>
    </el-container>
</div>

<script src="../../js/echarts.min.js"></script>
<script src="../../js/china.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>
<script src="../../js/js/mainui.js"></script>


<script type="text/javascript">
    function mainui() {
        let pieOption = {
            "title":{
                "text":"商品销量统计"
            },
            "legend":{
                "x":"left",
                "y":"center",
                "orient":"vertical",
                "data":[
                    "服饰",
                    "电子产品",
                    "零食",
                    "体育用品"
                ]
            },
            "tooltip":{
                "show":true
            },
            "xAxis":null,
            "yAxis":null,
            "series":[
                {
                    "name":"用户比例",
                    "type":"pie",
                    "radius":"55%",
                    "data":[
                        {
                            "name":"服饰",
                            "value":589
                        },
                        {
                            "name":"电子产品",
                            "value":1874
                        },
                        {
                            "name":"零食",
                            "value":995
                        },
                        {
                            "name":"体育用品",
                            "value":249
                        }
                    ]
                }
            ]
        }
        let mapOption = {
            title : {
                text: '用户地域分布',
                subtext: '',
                left: 'center'
            },
            tooltip : {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:['用户']
            },
            visualMap: {
                min: 0,
                max: 2500,
                left: 'left',
                top: 'bottom',
                text:['高','低'],           // 文本，默认为数值文本
                calculable : true
            },
            toolbox: {
                show: true,
                orient : 'vertical',
                left: 'right',
                top: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            series : [
                {
                    name: '用户',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:[
                        {name: '北京',value: Math.round(Math.random()*1000)},
                        {name: '天津',value: Math.round(Math.random()*1000)},
                        {name: '上海',value: Math.round(Math.random()*1000)},
                        {name: '重庆',value: Math.round(Math.random()*1000)},
                        {name: '河北',value: Math.round(Math.random()*1000)},
                        {name: '河南',value: Math.round(Math.random()*1000)},
                        {name: '云南',value: Math.round(Math.random()*1000)},
                        {name: '辽宁',value: Math.round(Math.random()*1000)},
                        {name: '黑龙江',value: Math.round(Math.random()*1000)},
                        {name: '湖南',value: Math.round(Math.random()*1000)},
                        {name: '安徽',value: Math.round(Math.random()*1000)},
                        {name: '山东',value: Math.round(Math.random()*1000)},
                        {name: '新疆',value: Math.round(Math.random()*1000)},
                        {name: '江苏',value: Math.round(Math.random()*1000)},
                        {name: '浙江',value: Math.round(Math.random()*1000)},
                        {name: '江西',value: Math.round(Math.random()*1000)},
                        {name: '湖北',value: Math.round(Math.random()*1000)},
                        {name: '广西',value: Math.round(Math.random()*1000)},
                        {name: '甘肃',value: Math.round(Math.random()*1000)},
                        {name: '山西',value: Math.round(Math.random()*1000)},
                        {name: '内蒙古',value: Math.round(Math.random()*1000)},
                        {name: '陕西',value: Math.round(Math.random()*1000)},
                        {name: '吉林',value: Math.round(Math.random()*1000)},
                        {name: '福建',value: Math.round(Math.random()*1000)},
                        {name: '贵州',value: Math.round(Math.random()*1000)},
                        {name: '广东',value: Math.round(Math.random()*1000)},
                        {name: '青海',value: Math.round(Math.random()*1000)},
                        {name: '西藏',value: Math.round(Math.random()*1000)},
                        {name: '四川',value: Math.round(Math.random()*1000)},
                        {name: '宁夏',value: Math.round(Math.random()*1000)},
                        {name: '海南',value: Math.round(Math.random()*1000)},
                        {name: '台湾',value: Math.round(Math.random()*1000)},
                        {name: '香港',value: Math.round(Math.random()*1000)},
                        {name: '澳门',value: Math.round(Math.random()*1000)}
                    ]
                }
            ]
        };
        new Vue({
            el: "#wrapper",
            data: {
                user: {},
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                dialogFormVisible: false,
                entity: {},
                isCollapse: false
            },
            mounted() {
                this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                console.log(this.user);
                // this.loadEcharts();
            },
            methods: {
                loadEcharts() {
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById('main'));
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(pieOption);

                    // 基于准备好的dom，初始化echarts实例
                    let mapChart = echarts.init(document.getElementById('map'));
                    // 使用刚指定的配置项和数据显示图表。
                    mapChart.setOption(mapOption);
                },
                handleCollapse() {
                    this.isCollapse = !this.isCollapse;
                },
                logout() {
                    $.get("/user/logout");
                    sessionStorage.removeItem("user");
                    location.href = "../../index.html";
                }
            }
        })

    }

    mainui();
</script>
</body>
</html>
